<template>
<div class="distributor-level views-container">
    <div class="wlm-table">
        <router-link class="wlm-text" tag="span" :to="{path:'/distribution/distributorLevelAdd'}">
            <el-button type="primary">添加等级</el-button>
        </router-link>
        <div class="big-warning flex-row">
            <p>提示：</p>
            <div class="flex-col">
              <p>没有设置等级的分销将按默认设置计算提成，商品指定的佣金金额的优先级仍是最高的，也就是说只要商品指定了佣金金额就按商品的佣金金额来计算，不受等级影响。</p>
              <p>禁用等级某个过后，未升级到该等级的用户将无法升级到该等级，已在该等级的用户不受影响</p>
            </div>
        </div>
        <div class="wlm-table-content">
            <el-table :ref="tableFormatData.userTable.key" :data="tableFormatData.userTable.tableData" @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column v-if="tableFormatData.userTable.files.status == '20' || tableFormatData.userTable.files.status == '10'" type="selection" width="55">
                </el-table-column>
                <el-table-column prop="date" label="等级"  min-width="40">
                    <template slot-scope="scope">
                        <p>{{scope.row.leave}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="等级名称" >
                    <template slot-scope="scope">
                        <span>{{scope.row.leave_title || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="一级佣金比例" >
                    <template slot-scope="scope">
                        <span v-if="scope.row.leave!=0">{{scope.row.leave_commission_1}}%</span>
                        <span v-if="scope.row.leave==0&&scope.row.dealer_money_type==10">{{scope.row.leave_commission_1}}%</span>
                        <span v-if="scope.row.leave==0&&scope.row.dealer_money_type==20">￥{{scope.row.leave_commission_1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="二级佣金比例" >
                    <template slot-scope="scope">
                        <span v-if="scope.row.leave!=0">{{scope.row.leave_commission_2}}%</span>
                        <span v-if="scope.row.leave==0&&scope.row.dealer_money_type==10">{{scope.row.leave_commission_2}}%</span>
                        <span v-if="scope.row.leave==0&&scope.row.dealer_money_type==20">￥{{scope.row.leave_commission_2}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="三级佣金比例" >
                    <template slot-scope="scope">
                        <span v-if="scope.row.leave!=0">{{scope.row.leave_commission_3}}%</span>
                        <span v-if="scope.row.leave==0&&scope.row.dealer_money_type==10">{{scope.row.leave_commission_3}}%</span>
                        <span v-if="scope.row.leave==0&&scope.row.dealer_money_type==20">￥{{scope.row.leave_commission_3}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="升级条件" >
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top" v-if="scope.row.leave!=0">
                            <div class="flex-col">
                                <div class="flex-col flex-align-c" style="margin-bottom:10px;">
                                    <p style="width:200px;text-align: center;">
                                        {{leaveCondition(scope.row)}}
                                    </p>
                                </div>
                            </div>
                            <div slot="reference" class="name-wrapper">
                                <div class="ellips_line2" style="white-space:normal;max-width:200px;max-height: 51px;overflow: hidden;"><span>{{leaveCondition(scope.row)}}</span></div>
                            </div>
                        </el-popover>
                        <span v-if="scope.row.leave==0">{{scope.row.leave_where}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="状态" >
                    <template slot-scope="scope">
                        <span>{{ scope.row.leave_state=='1'?'开启':'关闭'  }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="是否显示等级" >
                    <template slot-scope="scope">
                          <el-switch :inactive-value="2"  :active-value="1"  v-model="scope.row.leave_state_s" 
                         v-if="scope.row.leave"  @change="changeTableItem({leave_id:scope.row.leave_id,leave_state_s:scope.row.leave_state_s},tableFormatData.userTable.change.ShowState)">
                         </el-switch>
                    </template> 
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <div class="operation-group">
                            <router-link v-if="scope.row.leave!=0" class="wlm-text" tag="span" :to="{path:'/distribution/distributorLevelAdd', query :{ leave_id:scope.row.leave_id}}">
                                <el-button type="text">编辑</el-button>
                            </router-link>
                            <router-link v-if="scope.row.leave==0"  class="wlm-text" tag="span" :to="{path:'/distribution/distributorSetting', query :{ tabset:'commission'}}">
                                <el-button type="text">编辑</el-button>
                            </router-link>
                            <div v-if="scope.row.leave!=0" class="btn-line"></div>
                            <el-button v-if="scope.row.leave!=0"  class="wlm-text" type="text" @click="scope.row.leave_state = scope.row.leave_state === 1 ? 2 : 1;changeTableItem({leave_id:scope.row.leave_id,leave_state:scope.row.leave_state},tableFormatData.userTable.change.disbale,{isWarning: scope.row.leave_state === 2,warning:'是否确认禁用等级？',cancel:{msg:'已取消禁用',val:{scope:scope,cancelStatus:{key:'leave_state',val:1}}}})">{{scope.row.leave_state === 1 ? '禁用':'解除禁用'}}</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-content flex-row flex-justify-e flex-align-c">
                <el-pagination :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.userTable.pagination.total : 0">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
  LeaveList,
  LeaveState,
  ShowState
} from '@/api/distribution'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table')],
  name: 'DistributorLevel',
  components: {

  },
  computed: {
    leaveCondition() {
      return function($scope) {
        const result = ['-']
        const keys = Object.keys($scope)
        const { order_money, order_count, order_money_1, order_count_1, self_order_mone, self_order_count, child_count, child_agent_count, child_count_1, child_agent_count_1, withdraw_money, selected = [], leave_type } = $scope
        if (Array.isArray(selected)) {
          selected.map(item => {
            if (keys.includes(item)) {
              let scopeMsg = ''
              switch (item) {
                case 'order_money':
                  scopeMsg = `分销订单总额${order_money}元`
                  break
                case 'order_count':
                  scopeMsg = `分销订单总数${order_count}单`
                  break
                case 'order_money_1':
                  scopeMsg = `一级分销订单总额${order_money_1}元`
                  break
                case 'order_count_1':
                  scopeMsg = `一级分销订单总数${order_count_1}单`
                  break
                case 'self_order_mone':
                  scopeMsg = `自购订单总额${self_order_mone}元`
                  break
                case 'self_order_count':
                  scopeMsg = `自购订单总数${self_order_count}单`
                  break
                case 'child_count':
                  scopeMsg = `下线人数${child_count}人`
                  break
                case 'child_agent_count':
                  scopeMsg = `下线分销商${child_agent_count}人`
                  break
                case 'child_count_1':
                  scopeMsg = `一级下线人数${child_count_1}人`
                  break
                case 'child_agent_count_1':
                  scopeMsg = `一级下线分销商${child_agent_count_1}人`
                  break
                case 'goods_ids':
                  scopeMsg = `购买指定商品`
                  break
                case 'withdraw_money':
                  scopeMsg = `已提现佣金金额${withdraw_money}元`
                  break
              }
              result.push(scopeMsg)
            }
          })

          if (result.length > 1) {
            result.shift()
            if (leave_type === 1) {
              return result.join(' 或者 ')
            } else {
              return result.join(' 并且 ')
            }
          }
        }
        return result.join('')
      }
    }
  },
  data() {
    return {
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: LeaveList
          },
          tableData: [],
          files: {
            ids: [],
            checkall: '0',
            Recycle: '1'
          },
          change: {
            disbale: {
              name: '禁用',
              key: 'disbale',
              api: LeaveState
            },
            ShowState:{
               key: 'leave_state_s',
               api: ShowState
            }
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  methods: {
    changeTableCallBack({ event, params: { response } }) {
      if (event === 'getList') {
        const { data: { data: { default_leave } } } = response
        if (default_leave) {
          this.tableFormatData.userTable.tableData.unshift(default_leave)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.distributor-level {
}
</style>
